<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        
        // dom document object model 文档对象模型
        // 1 获取dom
        // 通过CSS选择器来获取dom 
        // 元素.querySelector("css名称")  // 返回匹配到第一个元素  未找到返回null
        // 元素.querySelectorAll("css名称")  //返回一个类数组  
        // 2 dom节点关系
        // 比如现在已经获取了el 节点
        // el.parentNode  父元素
        // el.firstElementChild  el下的第一个子元素节点
        // el.lastElementChild el下的最后一个子元素阶段
        // el.nextElementSibling el的下一个元素节点
        // el.previousElementSiling el的上一个元素节点
        // el.children el的所有子元素节点
        // 3 增删改节点
        // el.appendChild(添加的元素)
        // el.removeChild(删除的元素)
        // el.replaceChild(新节点，旧节点)
        // el.insertBefore(插入的新节点，位置（元素）)
        // 4 克隆
        // el.cloneNode(true)   深度克隆
        // el.cloneNode(false)  浅克隆
        // 5 创建节点
        // document.createElement(节点名称)

        // 6 操作类名
        // el.classList.add(类名) 添加类名
        // el.classList.remove(类名)  删除类名
        // el.classList.contains(类名) 是否存在一个类名 存在返回true  否则返回false
        // el.classList.toggle(类名) 切换类名





    </script>
</body>

</html>